<template>
	<view class="container">
		<view class="top-wrapper">
			<image src="/static/ex.png" class="icon"></image>
			<view class="text">
				<view class="t expres-company"><text>承运公司：</text>中通快递</view>
				<view class="t expres-no"><text>快递单号：</text>15654545465456</view>	
			</view>
		</view>
		<view class="content">
			<view class="title">订单跟踪</view>
			<view class="info-wrapper">
				<view class="info-item" v-for="(item, index) in 6" :class="{'on': index == 0}" :key="index">
					<view class="status">已签收</view>
					<view class="desc">您的订单已签收，感谢您对拾趣的选择，欢迎再次光临</view>
					<view class="time">2020-05-15 12:25:24</view>	
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import { viewLogistics } from '@/api/order.js'
	export default {
		data() {
			return {
				expressNo: ''
			}
		},
		onLoad(option) {
			this.expressNo = option.expressNo
			this.getDetails()
		},
		methods: {
			getDetails() {
				const data = {
				  expressNo: this.expressNo
				}
				viewLogistics(data).then(respanse => {
					this.details = respanse.result
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrapper{
		display: flex;
		padding: 48rpx 0 43rpx 53rpx;
		background-color: #fff;
		.icon{
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			background-color: #F5F5F5;
		}
		.text{
			flex: 1;
			padding-top: 4rpx;
			margin-left: 43rpx;
			.t{
				line-height: 36rpx;
				font-size: 26rpx;
				color: #333333;
				text{
					color: #999999;
				}
			}
			.expres-no{
				margin-top: 15rpx;
			}
		}
	}
	.content{
		padding: 29rpx 0 40rpx;
		margin-top: 30rpx;
		background-color: #fff;
		.title{
			padding-left: 39rpx;
			margin-bottom: 30rpx;
			line-height: 38rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
		.info-item{
			position: relative;
			padding: 30rpx 60rpx 30rpx 109rpx;
			color: #999999;
			&.on{
				color: #ED602B;
				&::before{
					content: "收";
					left: 38rpx;
					width: 44rpx;
					height: 44rpx;
					box-sizing: border-box;
					line-height: 39rpx;
					text-align: center;
					font-size: 20rpx;
					color: #fff;
					background-color: #ED602B;
					border: 5rpx solid #f0b8b4;
				}
			}
			&::after{
				content: " ";
				position: absolute;
				left: 58rpx;
				top: 0;
				bottom: 0;
				border-left: 1px solid #DADADA;
			}
			&::before{
				content: " ";
				position: absolute;
				left: 42rpx;
				top: 50%;
				z-index: 3;
				width: 16rpx;
				height: 16rpx;
				background: #DADADA;
				border-radius: 50%;
				transform: translateY(-50%);
				border: 10rpx solid #fff;
			}
			&:first-child::after{
				top: 50%;
			}
			&:last-child::after{
				bottom: 50%;
			}
			.status{
				line-height: 36rpx;
				font-size: 26rpx;
			}
			.desc{
				margin-top: 5rpx;
				line-height: 32rpx;
				font-size: 22rpx;
			}
			.time{
				margin-top: 6rpx;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
	}
</style>
